<template>
  <div class="modal-edit-box">
    <Form :model="keyForm" ref="tenantKeyForm" :rules="rules" :label-width="120">
      <Row :gutter="32" class="code-row-bg">
        <Col span="12" style="border:none;">
          <Form-item :label="$t('module.tenantManage.tenantID')" prop="tenantId">
            <Input
              :placeholder="$t('module.tenantManage.inputTenantID')"
              v-model="keyForm.tenantId"
              :maxlength="64"
            />
          </Form-item>
        </Col>
        <Col span="12" style="border:none;">
          <Form-item :label="$t('module.tenantManage.tenantName')" prop="tenantName">
            <Input
              :placeholder="$t('module.tenantManage.inputTenantName')"
              v-model="keyForm.tenantName"
              :maxlength="100"
            />
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="32" class="code-row-bg">
        <Col span="12" style="border:none;">
          <Form-item :label="$t('module.tenantManage.secretKey')" prop="signKey">
            <Input
              :placeholder="$t('module.tenantManage.inputSecretKey')"
              v-model="keyForm.signKey"
              :maxlength="500"
            />
          </Form-item>
        </Col>
        <Col span="12" style="border:none;">
          <Form-item :label="$t('module.tenantManage.encryptionType')" prop="encryptionType">
            <Input
              :placeholder="$t('module.tenantManage.inputEncryptionType')"
              v-model="keyForm.encryptionType"
              :maxlength="50"
            />
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="32" class="code-row-bg">
        <Col span="12" style="border:none;">
          <Form-item :label="$t('module.tenantManage.salt')" prop="salt">
            <Input
              :placeholder="$t('module.tenantManage.inputSalt')"
              v-model="keyForm.salt"
              :maxlength="50"
            />
          </Form-item>
        </Col>
        <Col span="12" style="border:none;">
          <Form-item :label="$t('module.tenantManage.remark')" prop="remark">
            <Input
              :placeholder="$t('module.tenantManage.inputRemark')"
              v-model="keyForm.remark"
              :maxlength="200"
            />
          </Form-item>
        </Col>
      </Row>
      <Row v-show="!keyInfo.id">
        <span class="tenant-manager">{{$t('module.tenantManage.tenantManage')}}</span>
      </Row>
      <Row :gutter="32" class="code-row-bg" v-show="!keyInfo.id">
        <Col span="12" style="border:none;">
          <Form-item :label="$t('module.userManage.userName')" prop="first">
            <Input
              :placeholder="$t('module.userManage.inputUserName')"
              v-model="keyForm.first"
            />
          </Form-item>
        </Col>
        <Col span="12" style="border:none;">
          <Form-item :label="$t('module.userManage.pwd')" prop="pwd">
            <Input
              :placeholder="$t('module.userManage.inputPwd')"
              v-model="keyForm.pwd"
              type="password"
            />
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="32" class="code-row-bg" v-show="!keyInfo.id">
        <Col span="12" style="border:none;">
          <Form-item :label="$t('module.userManage.email')" prop="email">
            <Input
              :placeholder="$t('module.userManage.inputEmail')"
              v-model="keyForm.email"
            />
          </Form-item>
        </Col>
        <Col span="12" style="border:none;">
          <Form-item :label="$t('module.userManage.phone')" prop="phone">
            <Input
              :placeholder="$t('module.userManage.inputPhone')"
              v-model="keyForm.phone"
              :maxlength="11"
            />
          </Form-item>
        </Col>
      </Row>
    </Form>
  </div>
</template>
<script>
import { addTenantKey, editTenantKey } from '@api/flowable/tenantManage.js'
import { phoneNumREG } from '@/const'
export default {
  name: 'addKey',
  props: {
    keyInfo: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    const validatePhone = (rule, value, callback) => {
      if (this.keyInfo.id) {
        callback()
      }
      if (value === '') {
        callback(new Error(this.$t('module.userManage.inputPhone')))
      } else if (!phoneNumREG.test(value)) {
        callback(new Error(this.$t('module.userManage.checkPhoneFormat')))
      }
      callback()
    }
    return {
      keyForm: {
        tenantName: this.keyInfo.tenantName || '',
        tenantId: this.keyInfo.tenantId || '',
        signKey: this.keyInfo.signKey || '',
        encryptionType: this.keyInfo.encryptionType || '',
        salt: this.keyInfo.salt || '',
        remark: this.keyInfo.remark || '',
        first: '',
        pwd: '',
        phone: '',
        email: '',
        actIdUser: {}
      },
      rules: {
        tenantName: [{ required: true, message: this.$t('module.tenantManage.inputTenantName'), trigger: 'blur' }],
        tenantId: [{ required: true, message: this.$t('module.tenantManage.inputTenantID'), trigger: 'blur' }],
        signKey: [{ required: true, message: this.$t('module.tenantManage.inputSecretKey'), trigger: 'blur' }],
        first: [
          {
            required: this.keyInfo.id ? false : true,
            message: this.$t('module.userManage.inputUserName'),
            trigger: 'blur'
          }
        ],
        pwd: [
          {
            required: this.keyInfo.id ? false : true,
            message: this.$t('module.userManage.inputPwd'),
            trigger: 'blur'
          }
        ],
        email: [
          {
            required: this.keyInfo.id ? false : true,
            message: this.$t('module.userManage.inputEmail'),
            trigger: 'blur'
          },
          { type: 'email', message: this.$t('module.userManage.checkEmailFormat'), trigger: 'blur' }
        ],
        phone: [{ required: true, validator: validatePhone, trigger: 'blur' }]
      },
      actions: [
        {
          text: this.$t('common.save'),
          theme: 'primary',
          handle: () => {
            this.save()
          },
          loading: false
        },
        {
          text: this.$t('common.close'),
          // theme: 'primary',
          handle: () => {
            this.$emit('Close')
          }
        }
      ]
    }
  },
  created() {
    let titleText,
      tenantText = this.$t('module.tenantManage.tenantKey')
    if (this.keyInfo.id) {
      titleText = this.$t('common.edit') + tenantText
    } else {
      titleText = this.$t('common.create') + tenantText
    }
    this.$emit('SetTitle', titleText)
    this.$emit("SetPageWidth", 800);
    this.$emit('SetPageActions', this.actions)
  },
  methods: {
    _processServiceResponse(res, promputText) {
      this.actions[0].loading = false
      if (res) {
        this.$Message.success({
          content: promputText,
          duration: 3
        })

        //关闭当前窗口
        this.$emit('Close', this.keyForm)
      }
    },
    save() {
      this.$refs['tenantKeyForm'].validate(valid => {
        if (valid) {
          this.actions[0].loading = true
          let process = this._processServiceResponse.bind(this),
            keyForm = JSON.parse(JSON.stringify(this.keyForm)),
            id = this.keyInfo.id
          if (id) {
            keyForm.id = id
            delete keyForm.first
            delete keyForm.pwd
            delete keyForm.phone
            delete keyForm.email
            editTenantKey(keyForm)
              .then(res => process(res, this.$t('common.updateSuccess')))
              .catch(err => (this.actions[0].loading = false))
          } else {
            keyForm.actIdUser.first = keyForm.first
            keyForm.actIdUser.pwd = keyForm.pwd
            keyForm.actIdUser.phone = keyForm.phone
            keyForm.actIdUser.email = keyForm.email
            delete keyForm.first
            delete keyForm.pwd
            delete keyForm.phone
            delete keyForm.email
            addTenantKey(keyForm)
              .then(res => process(res, this.$t('common.createSuccess')))
              .catch(err => (this.actions[0].loading = false))
          }
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.tenant-manager {
  font-size: 14px;
  padding-left: 20px;
  font-weight: 900;
}
</style>
